<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <!--    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="查找"
                    left-text="返回"
                    left-arrow
                    right-text="编辑"
                    @click-left="onClickLeft"
                    @click-right="showDeleteButton"
            />
        </van-col>
        <van-col span="24">
            <div class="d-flex">
                <div class="w-100">
                    <van-search v-model="selectName" placeholder="请输入搜索关键词" @search="OnSearch"/>
                </div>
                <div class="flex-grow-shrink mr-4">
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="selectStatus" :options="selectedOptions"/>
                    </van-dropdown-menu>
                </div>
            </div>
        </van-col>
        <van-col span="24">
            <div class="box m-4 pl-3 pr-3 pb-3">
                <ul class="breakfast-list">
                    <li v-for="(mm,index) in MovementModelAndUnits">
                        <div class="flex-grow-shrink">
                            <!--                            <van-image-->
                            <!--                                    width="100px"-->
                            <!--                                    height="100px"-->
                            <!--                                    fit="cover"-->
                            <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                            <!--                            />-->
                            <img :src="mm.mmImgurl" width="100px" height="100px"/>
                        </div>
                        <div class="w-100 pl-3 pr-3">
                            <p class="size3 bold">{{mm.mmName}}</p>
                            <p class="size1 color-ash">{{mm.difficulty}}</p>
                            <p class="size1 color-ash mt-2 text-ellipsis-2">{{mm.mmDescriptoin}}</p>
                        </div>
                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup(index)">选择
                        </van-button>
                        <van-icon name="../image/delete.png" size="40" @click="deleteMov(index)"
                                  v-show="deletebuttonshow"></van-icon>
                    </li>
                    <!--                    <li>-->
                    <!--                        <div class="flex-grow-shrink">-->
                    <!--                            <van-image-->
                    <!--                                    width="100px"-->
                    <!--                                    height="100px"-->
                    <!--                                    fit="cover"-->
                    <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                    <!--                            />-->
                    <!--                        </div>-->
                    <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
                    <!--                            <p class="size3 bold">一组跑步训练</p>-->
                    <!--                            <p class="size1 color-ash">难度：H3</p>-->
                    <!--                            <p class="size1 color-lesser">1.长跑：300km</p>-->
                    <!--                            <p class="size1 color-lesser">2.短跑：300km</p>-->
                    <!--                            <p class="size1 color-ash mt-1 text-ellipsis">Nunc a sagittis elit, eget vehicula ligula. Etiam consequat tristique metus,</p>-->
                    <!--                        </div>-->
                    <!--                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup2">选择</van-button>-->
                    <!--                    </li>-->
                </ul>
            </div>
        </van-col>
    </van-row>
    <van-row>
        <van-col span="24">
            <div style="height: 80px;"></div>
            <div class="fixed-bottom p-2 bg-white d-flex" style="box-sizing: border-box">
                <div class="w-100 pr-2">
                    <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block
                                @click="toCustomizeMov">添加自定义运动
                    </van-button>
                </div>
                <div class="w-100 pl-2">
                    <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block>添加自定义套餐</van-button>
                </div>
            </div>
        </van-col>
    </van-row>
    <van-row>
        <van-col span="24">
            <van-popup
                    v-model="show"
                    closeable
                    position="bottom"
                    :style="{ height: '60%' }"
            >
                <ul class="breakfast-list" style="margin: 50px 20px 20px 20px">
                    <li>
                        <div class="flex-grow-shrink">
                            <van-image
                                    width="100"
                                    height="100"
                                    fit="cover"
                                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                            />
                        </div>
                        <div class="w-100 pl-3 pr-3" style=" overflow: hidden">
                            <p class="size3 bold" v-model="pop.name">{{pop.name}}</p>
                            <p class="size1 mt-2 text-ellipsis" v-model="pop.descripton">{{pop.descripton}}</p>
                            <p class="size1 mt-2 d-flex align-items-center">
                                <van-icon name="star-o"></van-icon>
                                <span class="ml-2">收藏</span>
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="m-5">
                    <p class="color-main size3 mb-2">动作要点：</p>
                    <p class="border size2 p-3" v-model="pop.point">{{pop.point}}</p>
                </div>
                <!--                <div class="m-5">-->
                <!--                    <p class="color-main size3 mb-2">教学视频：</p>-->
                <!--                    <van-image-->
                <!--                            width="100%"-->
                <!--                            fit="cover"-->
                <!--                            src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                <!--                    ></van-image>-->
                <!--                </div>-->
                <div class="m-5 size2">
                    <!--                    <span class="ml-5">餐别:</span>-->
                    <!--                    <van-dropdown-menu>-->
                    <!--                        <van-dropdown-item v-model="pop.mealselected" :options="pop.eatType" />-->
                    <!--                    </van-dropdown-menu>-->
                    <span>单位：</span>
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="pop.selectindex" :options="pop.unittxt"/>
                    </van-dropdown-menu>
                    <span>数量：</span>
                    <van-field v-model="pop.quanlity"></van-field>
                    <van-button class="flex-grow-shrink" plain type="primary" @click="doexersise">运动</van-button>
                </div>
            </van-popup>
        </van-col>
        <van-col span="24">
            <van-popup
                    v-model="show2"
                    closeable
                    position="bottom"
                    :style="{ height: '60%' }"
            >
                <div style="height: 30px"></div>
                <div class="m-5">
                    <van-image
                            width="100%"
                            fit="cover"
                            src="https://img.yzcdn.cn/vant/cat.jpeg"
                    ></van-image>
                    <p class="size4 mb-2 bold mt-2" v-model="MovementModelAndUnits.mmName">套餐名称</p>
                    <p class="size1 color-ash" v-model="MovementModelAndUnits.mmDescription">描述Proin luctus semper
                        lobortis. Nunc efficitur ipsum a nisl euismod porttitor. Phasellus ac imperdiet odio. Proin
                        commodo mattis justo</p>
                </div>
                <div class="m-5">
                    <p class="color-main size3 mb-2">动作顺序：</p>
                    <div class="d-flex bg-f9 p-2 size2 mb-2">
                        <span class="flex-grow-shrink mr-4">1</span>
                        <span class="w-100 mr-2">代理收费</span>
                        <span class="flex-grow-shrink mr-4">跑100km</span>
                        <span class="flex-grow-shrink">消耗100千卡</span>
                    </div>
                    <div class="d-flex bg-f9 p-2 size2 mb-2">
                        <span class="flex-grow-shrink mr-4">1</span>
                        <span class="w-100 mr-2">代理收费</span>
                        <span class="flex-grow-shrink mr-4">跑100km</span>
                        <span class="flex-grow-shrink">消耗100千卡</span>
                    </div>
                    <div class="d-flex bg-f9 p-2 size2 mb-2">
                        <span class="flex-grow-shrink mr-4">1</span>
                        <span class="w-100 mr-2">代理收费</span>
                        <span class="flex-grow-shrink mr-4">跑100km</span>
                        <span class="flex-grow-shrink">消耗100千卡</span>
                    </div>
                </div>
            </van-popup>
        </van-col>
    </van-row>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                deletebuttonshow: false,
                MovementModelAndUnits: [{
                    eUnitList:
                        [
                            {
                                id: '',
                                unitName: '',
                                consumCalories: '',
                            },
                            {
                                id: '',
                                unitName: 'sdgsd',
                                consumCalories: '231',
                            },
                            {
                                id: '',
                                unitName: '',
                                consumCalories: '',
                            },
                        ],
                    id: '',
                    mmName: '',
                    mmImgurl: '',
                    mmCategoryId: '',
                    status: '',
                    mmPackagetype: '',
                    mmDescription: '',
                    difficulty: '',
                    points: '',
                    userid: '',
                }],
                selectName: '',
                selectStatus: 0,
                selectedOptions: [
                    {text: '默认运动', value: 0},
                    {text: '未上传的自定义运动', value: 1},
                    {text: '已上传的自定义运动', value: 2},
                    {text: '默认套餐', value: 3},
                    {text: '未上传的自定义套餐', value: 4},
                    {text: '已上传的自定义套餐', value: 5},
                ],
                pop:
                    {
                        modelid: '',
                        name: '',
                        descripton: '',
                        isCollected: false,
                        point: '',
                        units: [{
                            id: '',
                            unitName: 'dsg',
                            consumCalories: '231',
                        }],
                        unittxt: [{
                            text: '',
                            value: '',
                        }],
                        eatType: [
                            {text: '早餐', value: 1},
                            {text: '午餐', value: 2},
                            {text: '晚餐', value: 3},
                            {text: '加餐', value: 4}
                        ],
                        quanlity: '',
                        unitselected: '',
                        mealselected: '',
                        selectindex: '',
                    },
                selectindexid: '',
                value: '',
                value1: 0,
                show: false,
                show2: false,

            };
        },
        beforeMount: function () {
            console.log('生命周期函数启动！' + this.ModelUnitAndIfo);
            // console.log("开始搜索"+this.selectStatus+this.selectName);
            // let postdata ={
            //     status:this.selectStatus,
            //     name : this.selectName,
            // };
            // axios.post(`/movuser/selectMMByNameUseridAndStatus`, Qs.stringify(postdata))
            //     .then(res=>{
            //         this.MovementModelAndUnits=res.data.list;
            //         console.log('res=>',res.data.list);
            //         if (res.data.returnMsg!=null)
            //             alert(res.data.returnMsg.toString());
            //         Toast(val);
            //     });
        },
        methods: {
            showDeleteButton() {
                console.log("show!!!!!");
                if (vm.$data.deletebuttonshow == false)
                    vm.$data.deletebuttonshow = true;
                else
                    vm.$data.deletebuttonshow = false;
            },
            onClickLeft() {
                window.location.href = "toIndex";
                Toast('返回');
            },
            showPopup(index) {
                console.log("index is" + index);
                console.log("the id si " + vm.$data.MovementModelAndUnits[index].id);
                vm.$data.selectindexid = index;
                vm.$data.pop.modelid = vm.$data.MovementModelAndUnits[index].id;
                vm.$data.pop.name = vm.$data.MovementModelAndUnits[index].mmName;
                vm.$data.pop.descripton = vm.$data.MovementModelAndUnits[index].mmDescription;
                vm.$data.pop.point = vm.$data.MovementModelAndUnits[index].points;
                vm.$data.pop.status = vm.$data.MovementModelAndUnits[index].status;
                vm.$data.pop.difficulty = vm.$data.MovementModelAndUnits[index].difficulty;
                vm.$data.pop.videourl = vm.$data.MovementModelAndUnits[index].videourl;
                vm.$data.pop.mmPackagetype = vm.$data.MovementModelAndUnits[index].mmPackagetype;
                vm.$data.pop.units = vm.$data.MovementModelAndUnits[index].eUnitList;
                for (var k = 0; k < vm.$data.pop.unittxt.length; k++) {
                    vm.$data.pop.unittxt.pop();
                }
                for (var i = 0; i < vm.$data.MovementModelAndUnits[index].eunitList.length; i++) {
                    console.log("i=" + i);
                    console.log("unitname=" + vm.$data.MovementModelAndUnits[index].eunitList[i].unitName);
                    console.log("funitid=" + vm.$data.MovementModelAndUnits[index].eunitList[i].id);
                    vm.$data.pop.unittxt.push({
                        text: vm.$data.MovementModelAndUnits[index].eunitList[i].unitName,
                        value: i,
                    });
                }
                this.show = true;
            },
            deleteMov(index) {
                let postmsg = {
                    monId: vm.$data.MovementModelAndUnits[index].id,
                };
                axios.post('/movuser/deleteMovModel', Qs.stringify(postmsg)).then(
                    res = > {
                    var returnMsg = res.data.msg;
                if (returnMsg != null) {
                    console.log("？？？？？？" + JSON.stringify(res.data));
                    alert(returnMsg);
                    if (res.data.sign == 1) {
                        vm.$data.MovementModelAndUnits.splice(index, 1)
                    }
                }
            }
            )
            },
            doexersise() {
                var index = vm.$data.selectindexid;
                console.log("the index is" + index);
                var uindex = vm.$data.pop.selectindex;
                let mMandEUnit = {
                    mid: vm.$data.pop.modelid,
                    mmName: vm.$data.pop.name,
                    mmImgurl: vm.$data.pop.name,
                    mmCategoryId: 1,//vm.$data.MovementModelAndUnits[index].mmCategoryId,
                    status: vm.$data.MovementModelAndUnits[index].status,
                    mmPackagetype: 1,//vm.$data.MovementModelAndUnits[index].mmPackagetype,
                    mmDescroption: vm.$data.pop.descripton,
                    userid: vm.$data.MovementModelAndUnits[index].userid,
                    difficulty: vm.$data.MovementModelAndUnits[index].difficulty,
                    videourl: 1,//vm.$data.MovementModelAndUnits[index].videourl,
                    points: vm.$data.MovementModelAndUnits[index].points,
                    uid: vm.$data.MovementModelAndUnits[index].eunitList[uindex].id,
                    unitName: vm.$data.MovementModelAndUnits[index].eunitList[uindex].unitName,
                    consumCalories: vm.$data.MovementModelAndUnits[index].eunitList[uindex].consumCalories,
                    quality: vm.$data.pop.quanlity

                };
                var quality = vm.$data.pop.quanlity;
                console.log("$$$$$$$$$$$$quanlity is" + quality);
                axios.post(`/movuser/excuteAMdoel`, mMandEUnit)
                    .then(res = > {
                    // vm.$data.MovementModelAndUnits=res.data.list;
                    console.log('res=>', res.data.returnMsg);
                if (res.data.returnMsg != null)
                    alert(res.data.returnMsg.toString());
                Toast(val);
            })
                ;
            },
            OnSearch() {
                console.log("开始搜索" + vm.$data.selectStatus + this.selectName);
                let postdata = {
                    status: vm.$data.selectStatus,
                    name: vm.$data.selectName,
                };
                axios.post(`/movuser/selectMMByNameUseridAndStatus`, Qs.stringify(postdata))
                    .then(res = > {
                    vm.$data.MovementModelAndUnits = res.data.list;
                //拼接图片地址
                for (var i = 0; i < vm.$data.MovementModelAndUnits.length; i++) {
                    vm.$data.MovementModelAndUnits[i].mmImgurl = "../image/userImg/" + vm.$data.MovementModelAndUnits[i].mmImgurl;
                }
                console.log('res=>', res.data.list);
                if (res.data.returnMsg != null)
                    alert(res.data.returnMsg.toString());
                Toast(val);
            })
                ;
            },
            toCustomizeMov() {
                window.location.href = "toAddDIYMov";
            },
            showPopup2() {
                this.show2 = true;
            },
        }
    });
</script>
</html>